<div class="tab-pane tab-pane-global fade active show" id="tab--table-{{process}}" style="text-align:center">

    {% if error %}
      <p>{{ error }}</p>
    {% else %}
      </br>
      <span class="table-title"> Process  &lt; <i>{{ process }}</i> &gt; Memory Utilization Overtime</span>
      <div id="main-chart-{{process}}"   style="width: 100%; height:60vh;" ></div>

<!-- <script src="/static/js/vintage.js"></script> -->
<script type="text/javascript">

$.get("/fetch_process_chart_data/{{process}}/{{log_id}}", function(data){

  var myChart = echarts.init(document.getElementById('main-chart-{{process}}'));
  var x_axis = data["x_axis"];
  var mem_util = data["mem_util"];
  var restart = data["restart"];

option = {
    responsive: true,
    layout: {
        padding: {
    	left: 0,
    	right: 0,
    	top: 0,
    	bottom: 0
        },
    },
    title: {
	    text: 'Memory Utilization',
            align: 'center'
    },
    grid: {
        // show: true,
        bottom: '14%',
        left: '5%',
        right: '3%',
        // borderColor:'#1685a',
	// backgroundColor: "rgb(224, 240, 233, 0.2)", 
    },
    toolbox: {
	position: 'relative',
	x: "90%" ,
	y: "0.5%" ,
        itemSize: 20,
	itemGap: 20,
        feature: {
		restore: {
			title: 'Restore',
		        <!-- icon: 'image:///static/img/icon-refresh.svg', -->
		},
		saveAsImage: {
			title: 'Save',
		        <!-- icon: 'image:///static/img/icon-download.svg', -->
		}
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            animation: false,
            label: {
                backgroundColor: '#505765'
            }
        }
    },
    legend: {
        data: ['Memory Utilization'],
	show: true,
        zlevel: 99,
        <!-- left: 10 -->
    },
    dataZoom: [
        {
            show: true,
            realtime: true,
            start: 0,
            end: 100
        },
        {
            type: 'inside',
            realtime: true,
            start: 65,
            end: 85
        }
    ],
    xAxis: [
        {
            <!-- type: 'category', -->
            boundaryGap: true,
            axisTick:{
              show: false,
            },
            axisLine: {
		    onZero: false,
		    lineStyle:{
			    color: "#1685a",
			    width: 1,
		            type: "solid",
		    }
	    },
            data: x_axis.map(function (str) {
                return str.replace(' ', '\n');
            })
        }
    ],
    yAxis: [
        {
            name: 'Utilization (%)',
            type: 'value',
            axisTick:{
              show: false,
            },
            axisLine: {
		    // show: false,
		    lineStyle:{
			    color: "#1685a",
			    width: 1,
		            type: "solid",
		    }
	    },
        },
    ],
    series: [
        {
            name: 'Util',
            type: 'line',
            sampling:"max",
            animation: false,
		areaStyle: {
			color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                              offset: 0, color: 'red' 
                            }, {
                              offset: 1, color: '#FF9900' 
                           }],
                        global: false 
                       }
		},
            lineStyle: {
                width: 0,
            },
            markPoint: {
		    itemStyle:{
			    color: "#c89b40",
		    },
	        label: {
			    show: true,
			    distance: 20,
			    fontSize: 9,
			    color: "#50616d",
		    },
                data: restart,
            },
            data: mem_util
        },
       
    ]
};
myChart.setOption(option);

})



</script>

    {% endif %}

</div>

